<!--
    * Time    : 2021-03-16 09:33:16
    * Author  : zhangTj
    * Desc    : 调查结果Tap页面
-->

<template>
    <div class="w750">
        <div style="height: 44px">
            <div class="position-fixed top-0 w-100" style="z-index: 99">
                <van-tabs v-model="active" @change="changeTap" :color="themes.color" line-height="4">
                    <van-tab name="TapResult" title="总体结果" />
                    <van-tab name="TapInfo" title="我提交的信息" />
                </van-tabs>
            </div>
        </div>

        <div>
            <!-- 结果/提交信息 -->
            <div class="p-1">
                <keep-alive>
                    <component v-if="id && questionnaireId" :id="id" :questionnaire-id="questionnaireId" :is="active" @loadSuccess="stopLoading" />
                </keep-alive>
                <part-loading v-model="partLoading" backgroundColor="#fff" height="400px" size="24px" :color="themes.color" />
            </div>

            <div v-if="active == 'TapResult'" class="my-2 px-3">
                <van-button @click="$replaceToPage('/')" :color="themes.color" block>返回首页</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import PartLoading from '@/components/PartLoading/PartLoading'

import TapResult from './components/tap/TapResult'
import TapInfo from './components/tap/TapInfo'

export default {
    name: 'questionnaireTap',
    components: { PartLoading, TapResult, TapInfo },
    data() {
        return {
            questionnaireId: '', // 问卷id
            id: '', // 问卷结果id
            partLoading: true,
            active: 'TapResult'
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
        }
        if (this.$route.query.questionnaireId) {
            this.questionnaireId = this.$route.query.questionnaireId
        }
    },
    methods: {
        // 切换tap
        changeTap(name) {
            this.active = name
        },

        //
        stopLoading() {
            this.partLoading = false
        }
    }
}
</script>
